<template>
  <el-card class="mt0 global-search-card">
    <SearchCollapse>
      <el-form
        ref="searchRef"
        :model="value"
        class="global-search-form"
        v-bind="{
          inline: true,
          size: 'medium',
          labelPosition: 'right',
          ...formConfig.elFormConfig
        }"
        @submit.native.prevent
      >
        <div class="form-item">
          <template v-for="item in formConfig.itemList">
            <el-form-item
              v-if="item.type !== 'slot'"
              :key="item.key"
              v-bind="item.formItemProps"
            >
              <el-input
                v-if="item.type === 'input'"
                v-bind="item.itemProps"
                :value="value[item.key]"
                v-on="item.itemEvents"
                @input="handleInput($event, item)"
                @keydown.native="onKeyDown"
              >
              </el-input>
              <el-input-number
                v-if="item.type === 'inputNumber'"
                v-bind="item.itemProps"
                :value="value[item.key]"
                v-on="item.itemEvents"
                @input="handleInput($event, item)"
                @keydown.native="onKeyDown"
              >
              </el-input-number>
              <el-select
                v-else-if="item.type === 'select'"
                v-bind="item.itemProps"
                :value="value[item.key]"
                v-on="item.itemEvents"
                @change="handleInput($event, item)"
              >
                <el-option
                  v-for="o in item.options"
                  :key="o.value"
                  v-bind="o"
                  :label="o[item.selectLabel] || o.label"
                  :value="o[item.selectValue] || o.value"
                >
                </el-option>
              </el-select>

              <el-radio-group
                v-else-if="item.type === 'radio'"
                v-bind="item.itemProps"
                :value="value[item.key]"
                v-on="item.itemEvents"
                @input="handleInput($event, item)"
              >
                <el-radio
                  v-for="(o, i) in item.options"
                  :key="i"
                  :label="o.value"
                >
                  {{ o.label }}
                </el-radio>
              </el-radio-group>

              <el-date-picker
                v-else-if="item.type === 'date'"
                v-bind="item.itemProps"
                :value="value[item.key]"
                v-on="item.itemEvents"
                @input="handleInput($event, item)"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="item.type === 'slot'"
              :key="item.key"
              v-bind="item.formItemProps"
            >
              <slot :name="item.key" :data="item"></slot>
            </el-form-item>
          </template>
        </div>
        <slot v-if="formConfig.showSureBnt">
          <el-form-item>
            <div style="float: right">
              <el-button
                v-if="!formConfig.showSure"
                type="primary"
                @click="onSure('form')"
              >
                确 认
              </el-button>
              <el-button type="pain" @click="onClose"> 取 消 </el-button>
            </div>
          </el-form-item>
        </slot>
      </el-form>
      <template #control>
        <div v-if="!formConfig.hideFilterateBtn">
          <el-button
            v-if="!formConfig.hideSearchBnt"
            type="primary"
            @click="onSearch"
          >
            查询
          </el-button>
          <PipeResetBtn
            :formEl="$refs.searchRef"
            :loading="$props.isLoading"
            @clear="onReset"
          >
            重置
          </PipeResetBtn>
        </div>
      </template>
    </SearchCollapse>
  </el-card>
</template>

<script>
export default {
  name: 'BaseForm',
  props: {
    formConfig: {
      type: Object,
      required: true
    },
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      routeName: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.init()
    this.routeName = this.$route.name
    console.log(this.$route.name)
  },
  methods: {
    init() {
      this.clearCheckVerification()
      this.setDefaultValue()
      this.initSelect()
    },
    // 清除校验方法
    clearCheckVerification() {
      this.$nextTick(() => {
        if (this.$refs.form) {
          try {
            this.$refs.form.clearValidate()
          } catch (err) {
            console.log(err)
          }
        }
      })
    },
    async initSelect() {
      for (const item of this.formConfig.itemList) {
        if (item.type === 'select' && item.loadFn) {
          item.options = await item.loadFn()
        }
      }
    },
    submitForm(fn) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 用于表单验证后的手动校验
          if (fn && !fn()) return
          this.$emit('onConfirm')
        } else {
          return false
        }
      })
    },
    onKeyDown(e) {
      if (e.keyCode === 13) {
        this.onSearch()
      }
    },
    handleInput(val, item) {
      // 去空格
      if (item.type === 'input' && !(item.itemProps.type === 'textarea')) {
        val = val.replace(/[, ]/g, '')
      }
      this.$emit('input', { ...this.value, [item.key]: val })
    },
    setDefaultValue() {
      const formData = { ...this.value }
      // 设置默认值
      this.formConfig.itemList.forEach(({ key, currentValue }) => {
        if (formData[key] === undefined || formData[key] === null) {
          this.$set(this.value, key, currentValue)
          // formData[key] = currentValue
        }
      })
      // this.$emit('input', formData)
    },
    onSearch() {
      this.$emit('onSearch')
    },
    onSure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('onSure')
        } else {
          return false
        }
      })
    },
    onClose() {
      this.$emit('clickClose')
    },
    onReset() {
      const formData = { ...this.value }
      this.formConfig.itemList.forEach(({ key, currentValue }) => {
        formData[key] =
          currentValue || currentValue === null ? currentValue : ''
      })
      this.$emit('input', formData)
      this.$nextTick(() => {
        this.$emit('onReset')
      })
    },
    send() {
      this.dialogVisible = true
      this.$emit('childEvent', this.dialogVisible)
    }
  }
}
</script>
<style lang="scss" scoped>
.base-form {
  display: flex;
  flex-wrap: wrap;
}

.formStyle {
  width: calc(100% - 185px);
}

.form-item {
  display: flex;
  flex-wrap: wrap;
}

.form-btn {
  width: 148px;
  margin-right: 0;
  display: flex;
  align-items: flex-end;
  margin-bottom: 24px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 215px;
}

.global-card {
  margin-bottom: 20px;
}
.mt0 {
  margin-top: 0;
}
</style>
